<script setup>
import {
  onMounted,
  onUnmounted,
  ref,
  onBeforeMount,
  getCurrentInstance,
  nextTick,
} from "vue";
import {
  getGamePeople,
  getProvinceRank,
  getRmcInfo,
  getShopData,
  circleList,
} from "@/api/use";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
import { formatTime } from '@/utils/common'
import chinaMap from "@/utils/china.json";
// 获取全局 ECharts 实例
const { appContext } = getCurrentInstance();
const $echarts = appContext.config.globalProperties.$echarts;
const currentDate = ref(""); //当前时间
let timer = null; //展示当前时间的倒计时
// 格式化时间函数
// 格式化时间函数
const getTime = () => {
  currentDate.value =  formatTime();
};

const peopleNum = ref({}); //参数人数
const rankData = ref([]); //排行榜
const addressRank = ref([]); //地区排行榜
const shopList = ref([]);
const contentMess = ref([]);
//获取用户登录人数
const gamePeople = async () => {
  const res = await getGamePeople();
  if (res.code == 200) {
    peopleNum.value = res.data;
  }
};
//地区排行榜
const provinceRank = async () => {
  const res = await getProvinceRank();
  if (res.code == 200) {
    addressRank.value = res.data;
  }
};

//排行榜
const rmcInfo = async () => {
  const params = {
    time: 1,
    type: '2',
    province: ''
  };
  const res = await getRmcInfo(params);
  if (res.code == 200) {
    if(res.data.length > 10){
      rankData.value = res.data.slice(0, 10);
    }else{
      rankData.value = res.data;
    }
  }
};

//艇圈
const getCircleList = async () => {
  const res = await circleList();
  if (res.code == 200) {
    contentMess.value = res.data.list;
  }
};

//商品
const shopData = async () => {
  const params = {
    pageSize: 10,
    pageNum: 1,
  };
  const res = await getShopData(params);
  if (res.code == 200) {
    shopList.value = res.data.list;
  }
};

const chartMap = ref(null); //地图
let chartInstance = null; 

const option = {
  animation: true,
  tooltip: {
    trigger: "item",
  },
  geo: {
    // 替换原有的bmap配置
    map: "china",
    roam: true,
    zoom: 1.2,
    scaleLimit: {
      min: 0.8, // 最小缩放比例
      max: 5, // 最大缩放比例
    },
    
    label: {
      show: true,
      color: "#333",
    },
    itemStyle: {
      areaColor: "#f0f8ff", // 浅蓝色背景
      borderColor: "#00868B", // 青色边框
    },
    emphasis: {
      itemStyle: {
        areaColor: "#e6f7ff", // 高亮时浅蓝色
      },
    },
  },
};

const getInfoData = () => {
  gamePeople();
  provinceRank();
  rmcInfo();
  getCircleList();
  shopData();
};

const formatProgress = (percentage) => {
  return percentage; // 直接返回数字，不拼接%
};

onUnmounted(() => {
  clearInterval(timer);
});

onMounted(() => {
  getTime();
  timer = setInterval(getTime, 1000);
  getInfoData();
  if (chartMap.value) {
    $echarts.registerMap("china", chinaMap);
    chartInstance = $echarts.init(chartMap.value);
    chartInstance.setOption(option);
  }
});
</script>

<template>
  <div class="main">
    <div class="mainTop">
      <img src="@/assets/img_text.png" />
      <div class="leftTop">
        <div class="leftTopAddress">
          <img src="@/assets/icon_location.png" />
          上海
        </div>
        <div class="leftTopCenter"></div>
        <div class="leftTopText">{{ currentDate }}</div>
      </div>
    </div>
    <div class="mainCenter">
      <div class="mainCenterLeft">
        <div class="top">
          <p>赛点分布</p>
        </div>
        <div class="center">
          <div class="centerLeft">
            <div class="contentMess">
              <div class="title">总报名人数</div>
              <div class="num">
                <text>{{ peopleNum.totalRegistration}}</text>人
              </div>
            </div>
            <div class="contentMess">
              <div class="title">累计积累玩家</div>
              <div class="num">
                <text>{{ peopleNum.totalUser}}</text>人
              </div>
            </div>
            <div class="contentMess">
              <div class="title">赛事共举办</div>
              <div class="num">
                <text>{{ peopleNum.totalEvent}}</text>人
              </div>
            </div>
            <div class="contentMess">
              <div class="title">总参数</div>
              <div class="num">
                <text>{{ peopleNum.totalParticipant }}</text>人
              </div>
            </div>
          </div>
          <div class="centerRight" ref="chartMap"></div>
        </div>
      </div>
      <div class="mainCenterCenter">
        <div class="top">
          <p>排行榜</p>
        </div>
       <div class="rankClass">
        <div class="rankClassLeft">
          <div class="titleTop">总成绩TOP10</div>
          <div class="rankContent">
            <div class="item" v-for="item in rankData" :key="item.id">
                <div class="itemName">{{ item.nickName }}</div>
                <el-progress class="custom-progress" :format="formatProgress" :percentage="item.mileage" stroke-width="12"></el-progress>
            </div>
          </div>
        </div>
        <div class="rankClassRight">
          <div class="titleTop">各地区TOP10</div>
          <div class="rankContent">
            <div class="item" v-for="item in addressRank" :key="item.id">
                <div class="itemName">{{ item.province }}</div>
                <el-progress class="custom-progress" :format="formatProgress" :percentage="item.people" stroke-width="12"></el-progress>
            </div>
          </div>
       </div>
       </div>
      </div>
    </div>
    <div class="mainBottom">
      <div class="mainBottomLeft">
        <div class="top">
          <p>推荐赛艇</p>
        </div>
        <div class="center">
          <div class="centerContent">
            <vue3-seamless-scroll
              direction="left"
              v-if="shopList.length > 0"
              :list="shopList"
              :singleWaitTime="2000"
            >
              <div class="item" v-for="item in shopList" :key="item.id">
                <img :src="item.pictureUrl" />
                <div class="showName">{{ item.goodsName }}</div>
              </div>
            </vue3-seamless-scroll>
          </div>
        </div>
      </div>
      <div class="mainBottomRight">
        <div class="top">
          <p>艇圈活动</p>
        </div>
        <div class="center">
          <vue3-seamless-scroll
            v-if="contentMess.length > 0"
            :list="contentMess"
            :singleHeight="60"
            :singleWaitTime="1000"
            :limitScrollNum="3"
          >
            <div class="item">
              <div class="item_list" v-for="item in contentMess" :key="item.id">
                <img :src="item.images" />
                <div class="content">
                  <div class="title">
                    <div class="left">{{ item.title }}</div>
                    <div class="right">{{ item.createTime }}</div>
                  </div>
                  <div class="text">{{ item.description }}</div>
                </div>
              </div>
              <div class="itemBottom"></div>
            </div>
          </vue3-seamless-scroll>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.main {
  min-height: 100vh;
  padding: 20px 24px;
  background: url("@/assets/bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  .mainTop {
    width: 100%;
    height: 97px;
    display: block;
    padding-top: 14px;
    position: relative;
    background: url("@/assets/top.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    img {
      width: 504px;
      height: 53px;
    }
    .leftTop {
      top: 14px;
      left: 0;
      position: absolute;
      display: flex;
      align-items: center;
      font-size: 16px;
      font-family: AlibabaPuHuiTi_2_55_Regular;
      color: #00fffb;
      line-height: 22px;
      .leftTopAddress {
        display: flex;
        align-items: center;
        img {
          width: 32px;
          height: 30px;
          margin-right: 6px;
        }
      }
      .leftTopCenter {
        width: 2px;
        height: 24px;
        margin: 0 12px;
        background: linear-gradient(
          180deg,
          rgba(0, 177, 194, 0) 0%,
          #00b7c7 55%,
          rgba(0, 183, 199, 0) 100%
        );
      }
      .leftTopText {
        width: 159px;
        text-align: left;
        font-style: normal;
      }
    }
  }
  .mainCenter {
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
    .mainCenterLeft {
      height: 468px;
      width: 702px;
      padding: 19px;
      background: url("@/assets/img3.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-position: center;
      .top {
        width: 412px;
        height: 38px;
        line-height: 38px;
        font-size: 20px;
        color: #00fffb;
        text-align: left;
        background: url("@/assets/img1.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: center;
        p {
          padding-left: 20px;
        }
      }
      .center {
        margin: 31px 40px;
        display: flex;
        justify-content: space-between;
        .centerLeft {
          .contentMess {
            font-weight: bold;
            font-size: 24px;
            color: #ffffff;
            margin-bottom: 36px;
            width: 124px;
            .title {
              font-size: 12px;
              color: #56ffff;
              margin-bottom: 6px;
            }
            .num {
              font-size: 12px;
              color: #56ffff;
              text{
                font-weight: bold;
                font-size: 24px;
                color: #ffffff;
                margin-right: 4px;
              }
            }
          }
        }
        .centerRight {
          width: 470px;
          height: 400px;
        }
      }
    }
  }
  .mainCenterCenter {
    height: 468px;
    width: 1070px;
    padding: 19px;
    background: url("@/assets/img3.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    .top {
      width: 412px;
      height: 38px;
      line-height: 38px;
      font-size: 20px;
      color: #00fffb;
      text-align: left;
      background: url("@/assets/img1.png");
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      p {
        padding-left: 20px;
      }
    }
    .rankClass{
      height: 372px;
      margin: 10px 20px;
      margin-top: 14px;
      display: flex;
      justify-content: space-between;
      .rankClassLeft,.rankClassRight{
        width: 48%;
        .titleTop{
          width: 131px;
          height: 36px;
          font-size: 16px;
          color: #56FFFF;
          line-height: 36px;
          box-shadow: inset 0px 0px 53px 0px rgba(0,255,251,0.32);
          border-radius: 8px;
          border: 1px solid #00FFFB;
        }
        .rankContent{
          margin-top: 20px;
          text-align: left;
          .item{
            display: flex;
            margin-bottom: 14px;
            font-size: 16px !important;
            color: #00fffb !important;
            .itemName{
              width: 18%;
              text-align: left;
              overflow: hidden;
              font-weight: bold;
              text-overflow: ellipsis; 
              white-space: nowrap;   
            }
          }
          .custom-progress {
            width: 80%;
          }
          ::v-deep .custom-progress .el-progress-bar__outer {
            /* 环形内部的背景色 */
            background-color: linear-gradient( 270deg, #00FFFE 0%, rgba(71,230,255,0.07) 100%)!important;
            border-radius: 7px;
          }
          ::v-deep .custom-progress .el-progress__text {
            font-size: 16px !important;
            color: #00fffb !important;
          }
        }

      } 
      .rankClassRight{
        
      }
    } 
  }
  .mainBottom {
    display: flex;
    margin-top: 20px;
    justify-content: space-between;
    .mainBottomLeft,
    .mainBottomRight {
      height: 386px;
      width: 926px;
      padding: 19px 0px;
      background: url("@/assets/img2.png");
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      .top {
        width: 412px;
        height: 38px;
        line-height: 38px;
        margin-left: 19px;
        font-size: 20px;
        color: #00fffb;
        text-align: left;
        background: url("@/assets/img1.png");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        p {
          padding-left: 20px;
        }
      }
    }
    .mainBottomLeft {
      .center {
        margin: 28px 0px;
        position: relative;
        overflow: hidden;
        .centerContent {
          display: flex;
          margin: 0 39px;
          width: 852px;
          height: 312px;
          overflow: hidden;
          white-space: nowrap;

          .item {
            width: 240px;
            margin-right: 24px;
            margin-bottom: 19px;
            white-space: nowrap;
            display: inline-block;
            img {
              width: 240px;
              height: 240px;
              border-radius: 8px;
            }
            .showName {
              height: 32px;
              font-weight: bold;
              line-height: 32px;
              margin: 0 auto;
              margin-top: 20px;
              font-size: 16px;
              color: #00fffb;
              text-align: center;
              background: linear-gradient(
                270deg,
                rgba(0, 255, 251, 0) 0%,
                #00fffb 49%,
                rgba(0, 255, 251, 0) 100%
              );
            }
          }
          .item:nth-child(8n) {
            margin-right: 0px;
          }
        }
      }
    }
    .mainBottomRight {
      .center {
        height: 330px;
        width: calc(100% - 64px);
        margin: 0px 32px;
        overflow: hidden;
        .item {
          height: 360px;
          overflow: hidden;
          width: 100%;
          .item_list {
            display: flex;
            padding: 20px 0px;
            img {
              width: 52px;
              height: 52px;
            }
            .content {
              width: calc(100% - 64px);
              text-align: left;
              margin-left: 8px;
              .title {
                display: flex;
                align-items: center;
                justify-content: space-between;
                .left {
                  font-size: 16px;
                  color: #ffffff;
                  line-height: 22px;
                  font-weight: bold;
                }
                .right {
                  font-size: 13px;
                  color: #ffffff;
                  line-height: 18px;
                }
              }
              .text {
                font-size: 13px;
                color: #ffffff;
                line-height: 18px;
                margin-top: 6px;
                height: 18px;
                overflow: hidden;
                white-space: nowrap; /* 防止文本换行 */
                text-overflow: ellipsis;
              }
            }
          }
          .itemBottom {
            width: 870px;
            height: 1px;
            background: #ffffff;
            opacity: 0.14;
          }
        }
      }
    }
  }
}
</style>
